// src/pages/record/CheckRecord.vue
<template>
	<div class="check-record">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>点检记录</span>
					<div class="header-actions">
						<el-button type="primary" size="small" @click="openDialog('add')">新增记录</el-button>
						<el-button size="small" @click="exportCSV">导出</el-button>
					</div>
				</div>
			</template>

			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="设备编码">
					<el-input v-model="filters.code" />
				</el-form-item>
				<el-form-item label="设备名称">
					<el-input v-model="filters.name" />
				</el-form-item>
				<el-form-item label="点检人">
					<el-input v-model="filters.person" />
				</el-form-item>
				<el-form-item label="时间范围">
					<el-date-picker v-model="filters.range" type="daterange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="filteredList" border stripe highlight-current-row @row-click="viewDetail">
				<el-table-column prop="code" label="设备编码" width="120" />
				<el-table-column prop="name" label="设备名称" />
				<el-table-column prop="person" label="点检人" width="100" />
				<el-table-column prop="status" label="状态" width="100">
					<template #default="scope">
						<el-tag :type="scope.row.status === '异常' ? 'danger' : 'success'">{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="desc" label="异常情况" />
				<el-table-column prop="time" label="点检时间" width="160" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeRecord(scope.$index)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>

			<el-drawer v-model="drawerVisible" title="点检明细" size="40%" direction="rtl">
				<div class="detail-box">
					<p><b>设备编码：</b>{{ detail.code }}</p>
					<p><b>设备名称：</b>{{ detail.name }}</p>
					<p><b>点检人：</b>{{ detail.person }}</p>
					<p><b>点检状态：</b>{{ detail.status }}</p>
					<p><b>异常描述：</b>{{ detail.desc || '无' }}</p>
					<p><b>点检时间：</b>{{ detail.time }}</p>
				</div>
			</el-drawer>

			<el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
				<el-form :model="form" label-width="100px">
					<el-form-item label="设备编码">
						<el-input v-model="form.code" />
					</el-form-item>
					<el-form-item label="设备名称">
						<el-input v-model="form.name" />
					</el-form-item>
					<el-form-item label="点检人">
						<el-input v-model="form.person" />
					</el-form-item>
					<el-form-item label="点检状态">
						<el-radio-group v-model="form.status">
							<el-radio label="正常" />
							<el-radio label="异常" />
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="form.status === '异常'" label="异常描述">
						<el-input type="textarea" v-model="form.desc" />
					</el-form-item>
					<el-form-item label="点检时间">
						<el-date-picker v-model="form.time" type="datetime" style="width: 100%" />
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">保存</el-button>
				</template>
			</el-dialog>
		</el-card>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const list = ref(
  [...Array(10)].map((_, i) => ({
    code: `EQ00${i + 1}`,
    name: `设备-${i + 1}`,
    person: ['张三', '李四', '王五'][i % 3],
    status: i % 4 === 0 ? '异常' : '正常',
    desc: i % 4 === 0 ? '出现异响' : '',
    time: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm')
  }))
)

const filters = ref({ code: '', name: '', person: '', range: '' })
const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({})
const currentIndex = ref(-1)

const drawerVisible = ref(false)
const detail = ref({})

const openDialog = (type, row) => {
  dialogTitle.value = type === 'add' ? '新增点检记录' : '编辑点检记录'
  dialogVisible.value = true
  if (type === 'edit') {
    form.value = { ...row }
    currentIndex.value = list.value.findIndex(i => i.code === row.code && i.time === row.time)
  } else {
    form.value = {
      code: '', name: '', person: '', status: '正常', desc: '', time: dayjs().format('YYYY-MM-DD HH:mm')
    }
    currentIndex.value = -1
  }
}

const submitForm = () => {
  const newData = { ...form.value, time: dayjs(form.value.time).format('YYYY-MM-DD HH:mm') }
  if (currentIndex.value >= 0) {
    list.value[currentIndex.value] = newData
  } else {
    list.value.push(newData)
  }
  dialogVisible.value = false
}

const removeRecord = (index) => {
  list.value.splice(index, 1)
}

// const viewDetail = (row) => {
//   detail.value = row
//   drawerVisible.value = true
// }

const reset = () => {
  filters.value = { code: '', name: '', person: '', range: '' }
}

const filteredList = computed(() => {
  return list.value.filter(item => {
    const f = filters.value
    return [
      !f.code || item.code.includes(f.code),
      !f.name || item.name.includes(f.name),
      !f.person || item.person.includes(f.person),
      !f.range || (dayjs(item.time).isAfter(f.range[0]) && dayjs(item.time).isBefore(f.range[1]))
    ].every(Boolean)
  })
})

const exportCSV = () => {
  const rows = filteredList.value.map(item => [
    item.code,
    item.name,
    item.person,
    item.status,
    item.desc || '',
    item.time
  ])
  const header = ['设备编码', '设备名称', '点检人', '状态', '异常描述', '点检时间']
  const csvContent = [header, ...rows].map(e => e.join(',')).join('\n')
  const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '点检记录.csv'
  link.click()
}
</script>


<style scoped>
.check-record {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.header-actions {
	display: flex;
	gap: 8px;
	/* 控制按钮间距 */
}

/* 保持原有其他样式 */
.quality-record {
	padding: 20px;
}
</style>
